<template>
  <div>
    <a-table 
    :columns="columns" 
    :data="list" 
    :bordered="false"
    :pagination="false"
    :table-layout-fixed="tableLayout"
    >
    <template #index="{rowIndex}">
      <div>{{rowIndex +1}}</div>
    </template>
    <template #version="{record}">
      <div>{{ "V" +record.version }}</div>
    </template>
    <template #operator="{record }">
      <div class="table-btn" @click="goToDetails(record)">{{operatorInfo}}</div>
    </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { type PropType } from 'vue';
defineProps({
  columns:{
    type: Array as PropType<any[]>,
    // default: () => []
    require:true
  },
  operatorInfo:{
    type: String as PropType<string>,
    default: "查看详情"
  },
  tableLayout:{ // 是否开启表格列平分宽度
    type:Boolean,
    default: true
  },
  list:{
    type: Array as PropType<any[]>,
    require:true
  }
})

const $emits = defineEmits(['goToDetails'])
      
const goToDetails = (vlaue) => {
  console.log(vlaue,'goToDetails');
  $emits('goToDetails',vlaue)
}    
</script>
<style lang="less" scoped>
.table-btn{
  color: #1459FA;
}
::v-deep{
  .arco-table-th{
    background-color: #EBF0FA;
  }
  .arco-table-th-title{
    color: #394D73;
  }
  .arco-table-td-content{
    color: #465A80;
  }
}
</style>